<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-tabs
      ref="tabs"
      v-model="activeName"
      class="text-tabs TTB-no-gutter TTB-gutter"
      @tab-click="handlerTabschange"
    >
      <el-tab-pane label="单位基本信息" name="basicMsg"></el-tab-pane>
      <!-- <el-tab-pane
        v-if="userInfo.deptId != 100"
        label="上级单位基本信息"
        name="upbasicMsg"
      ></el-tab-pane> -->
      <el-tab-pane label="历年能耗信息" name="overYear"></el-tab-pane>
      <!-- <el-tab-pane label="办公场所信息" name="officeSpace"></el-tab-pane> -->
    </el-tabs>
    <component :is="activeName" :ref="activeName"></component>
  </lb-layout>
</template>

<script>
import { mapState } from "vuex";
import basicMsg from "@/views/work/departmental/components/basicMsg.vue";
import upbasicMsg from "@/views/work/departmental/components/upbasicMsg.vue";
import overYear from "@/views/work/departmental/components/overYear.vue";
import officeSpace from "@/views/work/departmental/components/officeSpace.vue";
export default {
  components: {
    basicMsg,
    upbasicMsg,
    overYear,
    officeSpace,
  },
  data() {
    return {
      activeName: "basicMsg",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user,
    }),
  },
  created() {
    console.log(this.userInfo);
  },
  mounted() {
    if (this.$route.query.overYear == 1) {
      this.activeName = "overYear";
    } else {
      this.activeName = "basicMsg";
    }
  },
  methods: {
    handlerTabschange() {
      const name = this.$refs.tabs.value;
      if (this.activeName === name) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.text-tabs {
  margin-left: -40px;
  ::v-deep .el-tabs__item {
    font-size: 22px;
  }
}
</style>
